<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery操作DOM</title>
        <!-- JQueryscprit:核心语法+DOM（针对页面操作）+BOM(针对浏览器)
         学习主体：针对页面操作比较多---DOM操作
         JQuery操作DOM：理解：JQ框架改变页面内容效果
         js基础就可以直接学习，了解函数使用
         基础函数------事件源之后出现，事件源语法糖中
         html().            作用：增加一个元素，覆盖原有html
         val()              作用：针对input元素，实现修改文本框内容
         text()                作用：生成文本内容
         
         -->
         <script src="./js/jquery-1.11.1.js"></script>
    </head>
    <body>
        <!-- 鼠标点击按钮，然后，下面 -->
        <button>按钮</button>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti asperiores adipisci fugit molestiae eos nemo, vitae illo sed, cupiditate dolor facilis, aspernatur blanditiis natus dolore laudantium odit nostrum modi nihil!</p>
        
        <div style="width:200px;height:200px;background-color: #000;"></div>
        <h3>lorem</h3>
        <input type="button" value="按钮2" />
        <input type="text" value="输入可以直接写文本" />
        <script>
            $("button").click(function(){
                /* JQ操作DOM--html()函数使用 */
                $("p").html("<h1>JQ操作DOM-html函数使用</h1>");
            });
            /* 练习1：div 200*200 背景 黑 下面有一行文本 鼠标划归之后
             下面内容修改
             */
            $("div").mouseenter(function(){
                $("h3").html("<h3>黄颜色</h3>");
            });
            /* 练习2：按钮 文本框  点击按钮，文本框增加一行文本 */
            $("input[type='button']").click(function(){
             //alert("jq是否选中")
             $("input[type='text']").val("文本框内容修改~");
            });
            /* 利用JQ操作DOM（页面效果）：元素内容操作【3个函数】
                                    属性操作(四个函数)
                                    样式操作（四个函数）
                                    元素样式操作（五个函数）
                                    插入和删除操作【7个函数】
                                    元素遍历操作（6个函数）
                                    JQ动画操作（七个函数）
             */
            
        </script>
    </body>
    
</html> 